<script setup lang="ts">
import {addTagsUrl, updateTagsUrl} from "@/api/blog/tags.ts";

const formData = ref({
  btName: '',
})
const $emit = defineEmits(['getList'])
const formRef = ref(null)
const isEdit = ref(false)
const open = ref(false)
const {proxy}: any = getCurrentInstance()
const formRules = reactive({
  btName: [
    {required: true, message: '请输入标签名称', trigger: 'blur'},
  ],
})

const openDialog = (data?: any) => {
  open.value = true
  isEdit.value = (data && data.bcId !== null)
  formData.value = data || {}
}
const closeDialog = () => {
  open.value = false
}
const submitForm = async () => {
  if (!formRef.value) return
  formRef.value?.validate((valid: any) => {
    if (valid) {
      const params = {
        ...formData.value
      }
      if (isEdit.value) {
        updateTagsUrl(params).then((res: any) => {
          proxy.$modal.msgSuccess(res.msg)
          $emit('getList')
          closeDialog()
        })
      } else {
        addTagsUrl(params).then((res: any) => {
          proxy.$modal.msgSuccess(res.msg)
          $emit('getList')
          closeDialog()
        })
      }
    } else {
      proxy.$modal.msgError('请填写必填项')
    }
  })
}

/*对外暴露方法*/
defineExpose({
  openDialog
})
</script>

<template>
  <el-dialog width="500px" :title="isEdit ? '编辑标签' : '添加标签'" v-model="open">
    <el-form ref="formRef" :model="formData" label-width="80px" :rules="formRules">
      <el-form-item label="标签名称"  prop="btName">
        <el-input v-model="formData.btName" placeholder="请输入标签名称"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">

</style>
